<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./css/login.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background: url("./images/bg1.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .kaptcha .kaptcha-input{
            float: left;
            width: 100px;
        }

    </style>
</head>
<body>
<canvas class="cavs" width="1575" height="1337"></canvas>

<div class="loginmain">
    <div class="login-title">
        <span>管理员登录</span>
    </div>

    <div class="login-con">
        <div class="login-user">
            <div class="icon">
                <img src="./images/user_icon_copy.png" alt="">
            </div>
            <input type="text" name="username" placeholder="用户名" autocomplete="off" value="root">
        </div>
        <div class="login-pwd">
            <div class="icon">
                <img src="./images/lock_icon_copy.png" alt="">
            </div>
            <input type="password" name="password" placeholder="密码" autocomplete="off" value="123456">
        </div>
        <div class="login-yan">
            <div class="icon">
                <img src="./images/key.png" alt="">
            </div>
            <div class="kaptcha">
                <input type="text" class="kaptcha-input" name="kaptcha" placeholder="验证码" autocomplete="off" value="">
                <img id="verificationCodeImg"  class="kaptcha-img" src="/api/kaptcha/defaultKaptcha" style="cursor: pointer;" title="看不清？换一张" />
            </div>
        </div>
        <div class="login-btn">
            <input type="button" onclick="login()" value="登录">
        </div>
    </div>

</div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/ban.js"></script>
<script src="./layer/layer.js"></script>
<script>
    function login() {
        var username = $("input[name='username']").val();
        var passwrod = $("input[name='password']").val();
        var kaptcha = $("input[name='kaptcha']").val();
        $.ajax({
            url: "/postLogin",
            type: "post",
            async: true,
            dataType: "json",
            data:{username:username,password: passwrod,kaptcha:kaptcha},
            success: function (data) {
                if(data.status == 200){
                    layer.msg(data.message,{icon:1, time: 1000},function () {
                        location.href = "/index";
                    });
                } else {
                    layer.msg(data.message,{icon:2,time:1000},function () {
                        $('#verificationCodeImg').trigger("click");
                    });
                }
            },
            error: function (e) {
                alert(e)
            }
        })
    }

    // 刷新验证码
    $("#verificationCodeImg").bind("click", function () {
        $(this).hide().attr('src', '/api/kaptcha/defaultKaptcha').fadeIn();
    });
</script>
</html>
